<!DOCTYPE html>
<script>
    var runPixelTests = true;
</script>
<script src="full-screen-test.js"></script>
<style>
#float {
    margin: 10px 0 0 10px;
    height: 50px;
    width: 50px;
    float: left;
    background-color: red;
}
#clear {
    clear:left;
}
#one {
    background-color: lightblue;
    float: left;
}
#two {
    background-color: lightgreen;
}
</style>
<body>
<div>This layout test checks that the offset positions of the blue and green divs does not change when the red div enters full-screen mode.  Press <button onclick="document.getElementById('float').webkitRequestFullScreen()">go full-screen</a> to begin.</div>
<div id="float"></div>
<div id="one">One</div>
<div id="clear" />
<span id="two">Two</span>
<script>
    var callback;
    var fullscreenChanged = function(event)
    {
        if (callback)
            callback(event)
    };
    document.onwebkitfullscreenchange = fullscreenChanged;

    var div = document.getElementById("float");

    var divEnteredFullScreen = function()
    {
        if (document.webkitCurrentFullScreenElement == div) {
            callback = cancelledFullScreen;
            runWithKeyDown(function(){document.webkitCancelFullScreen()});
        }
    };

    var cancelledFullScreen = function()
    {
        if (document.webkitCurrentFullScreenElement == null) {
            callback = null;
            endTest();
        }
    };

    callback = divEnteredFullScreen;
    runWithKeyDown(function(){div.webkitRequestFullScreen()});
</script>
